// https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_extrude_splines.html
import { 
  AmbientLight,
  CameraHelper,
  Clock,
  Color,
  DirectionalLight,
  Mesh,
  MeshBasicMaterial,
  MeshLambertMaterial,
  Object3D,
  Path,
  PerspectiveCamera,
  Scene, 
  SphereGeometry, 
  SpotLight, 
  SpotLightHelper, 
  TextureLoader, 
  TubeGeometry, 
  Vector3, 
  WebGLRenderer
} from "three";
import stats from '../../utils/stats';
import { Curves } from 'three/examples/jsm/curves/CurveExtras'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

const position = new Vector3();
const binormal = new Vector3();
const direction = new Vector3();
const normal = new Vector3();
const lookAt = new Vector3();

let clock = new Clock();
let scene = new Scene();
scene.background = new Color(0xf0f0f0)

let camera = new PerspectiveCamera(50, window.innerWidth/window.innerHeight, 0.01, 10000);
camera.position.set(0, 50, 500);
// camera.lookAt(scene.position);

const renderer = new WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

// 添加聚光灯
let spotLight = new SpotLight('#ffffff')
spotLight.position.set(-40, 60, -10)
spotLight.castShadow = true
spotLight.shadow.camera.near = 1
spotLight.shadow.camera.far = 100
// scene.add(spotLight)
// scene.add(new SpotLightHelper(spotLight))

const light = new DirectionalLight(0xffffff);
light.position.set(0, 0, 1);
scene.add(light);


let parent = new Object3D();
let splineCamera = new PerspectiveCamera(84, window.innerWidth/window.innerHeight, 0.01, 1000);
parent.add(splineCamera);
let cameraHelper = new CameraHelper(splineCamera);
scene.add(cameraHelper);


const splines = {
  HeartCurve: new Curves.HeartCurve(3.8),
}

const params = {
  spline: 'HeartCurve',
  scale: 4,
}

const material = new MeshLambertMaterial({ color: 0xff00ff });
const wireframeMaterial = new MeshBasicMaterial({
  color: 0xffffff, 
  opacity: 0.3,
  wireframe: true,
  transparent: true,
})

let geometry = new TubeGeometry(new Curves.HeartCurve(3.8), 100, 2, 3);
let mesh = new Mesh(geometry, material);
let wireframe = new Mesh(geometry, wireframeMaterial);

mesh.add(wireframe);
parent.add(mesh);

scene.add(parent);

const orbitControls = new OrbitControls(camera, renderer.domElement);

render();

function render() {
  stats.update();
  orbitControls.update();

  // 通过时间计算进度
  const time = Date.now();
  const looptime = 20 * 1000;
  const t = (time % looptime) / looptime;

  // 在几何上获取点位
  geometry.parameters.path.getPointAt(t, position);
  // console.log('>>>', position)
  // 放大所有的点位
  position.multiplyScalar(params.scale);
  // console.log('>>>>', position)

  // 获取几何一个Vector3切线数组长度
  const segments = geometry.tangents.length;
  // 从数组中取值
  const pickt = t * segments;
  // 取整
  const pick = Math.floor(pickt);
  const pickNext = (pick + 1) % segments;
  // console.log(pickt, pick, pickNext)

  // 一个Vector3次法线数组。
  binormal.subVectors(geometry.binormals[pickNext], geometry.binormals[pick]);
  // console.log(1, binormal)
  binormal.multiplyScalar(pickt - pick).add(geometry.binormals[pick]);
  // console.log(2, binormal)

  geometry.parameters.path.getTangentAt(t, direction);
  console.log('direction', direction)

  const offset = 15;

  normal.copy(binormal).cross(direction);

  position.add(normal.clone().multiplyScalar(offset));

  splineCamera.position.copy(position);

  geometry.parameters.path.getPointAt(
    (t + 30 / geometry.parameters.path.getLength()) % 1,
    lookAt
  )
  lookAt.multiplyScalar(params.scale);

  splineCamera.matrix.lookAt(splineCamera.position, lookAt, normal);
  // 设置朝向
  splineCamera.quaternion.setFromRotationMatrix(splineCamera.matrix);

  cameraHelper.update();

  requestAnimationFrame(render);
  renderer.render(scene, camera);
}